$textPaperWidth = 1000px;
$textPaperPaddingLeft = 50px;
$textPaperPaddingRight = 50px;

@import '../common/style/reset.styl';
@import '../common/style/button.styl';

body {
	background-color: #eee;
	padding-top: 20px;

	.title {
		width: $textPaperWidth;
		margin: 0 auto;
		background-color: #ddd;
		padding-left: $textPaperPaddingLeft;
		padding-right: $textPaperPaddingRight;
		height: 62px;
		position: relative;

		img {
			width: 300px;
		}

		.title-text {
			position: absolute;
			top: 0;
			left: 360px;
			font-size: 26px;
			font-weight: bold;
			line-height: 62px;
			color: #de2810;
		}
	}

	.note {
		width: $textPaperWidth;
		margin: 0 auto;
		line-height: 50px;
		background-color: #f2dede;
		padding-left: $textPaperPaddingLeft;
		padding-right: $textPaperPaddingRight;

		h3 {
			text-align: center;
			margin: 0;
		}

		p {
			font-weight: bold;

			span {
				color: red;
			}
		}

		.tips {
			color: red;
		}
	}

	.paper-wraper {
		width: $textPaperWidth;
		background-color: #fff;
		margin: 0 auto;
		padding-left: $textPaperPaddingLeft;
		padding-right: $textPaperPaddingRight;
		padding-top: 40px;
		padding-bottom: 50px;

		.question-type {
			margin-bottom: 15px;
			font-style: italic;
		}

		.question {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 30px;
		}

		.options {
			padding-left: 15px;
			margin-bottom: 30px;

			.option {
				margin-bottom: 10px;
				font-weight: bold;

				&:hover {
					color: #4cae4c;
				}

				label {
					cursor: pointer;
				}
			}
		}

		.result {
			.result-status-right {
				margin: 0 auto;
				text-align: center;
				font-weight: bold;
				margin-bottom: 15px;
				background-color: #dff0d8;

				span {
					line-height: 47px;
				}
			}

			.result-status-wrong {
				margin: 0 auto;
				text-align: center;
				font-weight: bold;
				padding-bottom: 5px;
				margin-bottom: 15px;
				background-color: #f2dede;

				span {
					line-height: 47px;
				}

				.right-answer {
					text-align: left;
					padding-left: 15px;
					color: #a94442;
				}
			}
		}

		.submit-paper-btn {
			width: 100%;
			height: 65px;
			font-size: 40px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.continue-btn {
			height: 30px;
			width: 90px;
			float: right;
		}

		.return-btn {
			width: 100%;
			height: 65px;
			font-size: 40px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.answer-wrong-continue-btn {
			width: 100%;
			height: 65px;
			font-size: 40px;
			font-weight: bold;
			margin-bottom: 20px;
		}
	}
}
